<template>
  <div>
    <a-tabs>
      <a-tab-pane key="info" :tab="t('基本信息')">
        <UserInfo />
      </a-tab-pane>
      <a-tab-pane key="base" :tab="t('基础配置')">
        <PageSetting />
      </a-tab-pane>
      <a-tab-pane key="password" :tab="t('修改密码')">
        <a-card>
          <a-form
            layout="vertical"
            :model="passwordForm"
            @submit="submit"
            :rules="rules"
            :wrapper-col="{
              span: 6,
            }"
          >
            <a-form-item :label="t('旧密码')" name="oldPassword">
              <a-input-password v-model:value="passwordForm.oldPassword" />
            </a-form-item>
            <a-form-item :label="t('新密码')" name="newPassword">
              <a-input-password v-model:value="passwordForm.newPassword" />
            </a-form-item>
            <a-form-item :label="t('确定密码')" name="confirmPassword">
              <a-input-password v-model:value="passwordForm.confirmPassword" />
            </a-form-item>
            <a-button type="primary" htmlType="submit">{{ t('保存') }}</a-button>
          </a-form>
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { updateUserPwd } from '@/api/modules/user/user';
import UserInfo from './info/UserInfo.vue';
import PageSetting from './page-setting/PageSetting.vue';
import type { Rule } from 'ant-design-vue/es/form';
import { notify } from '@/utils/common/common';
import { logoff } from '@/api/modules/user/utils';

const { t } = useI18n();
const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
});
const checked = () => {
  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
    return Promise.reject('密码不一致');
  }
  return Promise.resolve();
};
const rules: Record<string, Rule[]> = {
  confirmPassword: [{ validator: checked, trigger: 'change' }],
};

const submit = async () => {
  const { data } = await updateUserPwd(
    passwordForm.value.oldPassword,
    passwordForm.value.newPassword,
  );
  notify(data);
  logoff();
};
</script>

<style lang="scss" scoped></style>
